<style lang="less">
    @import "approvePre.less";
</style>
<template>
    <div class="search">
        <Row>
            <Col>
                <Card>
                    <Row>
                        <Form  ref="searchForm" :model="searchForm" inline :label-width="120" class="search-form" @keydown.enter.native="handleSearch">
                           <span>
                            <Form-item label="姓名" prop="customerName">
                                <Input type="text" v-model="searchForm.customerName" clearable placeholder="请输入"
                                       style="width: 200px"/>
                            </Form-item>
                            <Form-item label="证件号码"  prop="cardNo" >
                                <Input type="text" v-model="searchForm.cardNo" clearable placeholder="请输入"
                                       style="width: 200px"/>
                            </Form-item>
                            <Form-item label="手机号码" prop="phone">
                                <Input type="text" v-model="searchForm.phone" clearable placeholder="请输入"
                                       style="width: 200px"/>
                            </Form-item>
                            <Form-item label="申请时间"  prop="applyDate" >
                                <DatePicker v-model="selectDate" type="daterange" format="yyyy-MM-dd" clearable
                                            @on-change="selectDateRange" placeholder="选择申请时间"
                                            style="width: 200px"></DatePicker>
                            </Form-item>
                            <Form-item label="经销商" prop="dealerName">
                                <Input type="text" v-model="searchForm.dealerName" clearable placeholder="请输入"
                                       style="width: 200px"/>
                            </Form-item>
                            <Form-item label="预审批结果" prop="applyStatus">
                                <Select v-model="searchForm.applyStatus" style="width:200px" clearable placeholder="请选择">
                                    <Option v-for="item in applyStatusList" :value="item.value" :label="item.title" :key="item.value">{{ item.title }}</Option>
                                </Select>
                            </Form-item>
                            </span>
                            <Col :span="12" :offset="7">
                                <Form-item>
                                    <Button @click="handleSearch" type="primary" icon="ios-search">查询</Button>
                                    <Button @click="handleReset"  type="primary" icon="ios-trash">清空</Button>
                                </Form-item>
                            </Col>
                        </Form>
                    </Row>
                    <Row>
                        <Table :loading="loading" border :columns="columns" :data="data" sortable="custom"
                               @on-sort-change="changeSort"  ref="table">
                            <template slot-scope="{ row, index }" slot="custName">
                                <DynamicLink component="projects/afs-core-business/pages/case/approve/task-detail/preliminary-approve/preliminaryApprove"
                                             :is-full="true" :params="{custName:row.custName,applyNo:row.applyNo}" :name="row.custName" page-title="预审批案件详情"></DynamicLink>
                            </template>
                            <template slot-scope="{ row, index }" slot="businessType">
                                <span>{{setBusinessTypeTitle(row.businessType)}}</span>
                            </template>
                            <template slot-scope="{ row, index }" slot="applyStatus">
                                <span>{{setApplyStatusTitle(row.applyStatus)}}</span>
                            </template>
                        </Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize"
                              @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]"
                              size="small" show-total show-elevator show-sizer></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
    </div>
</template>
<script>
    //预审批任务组装查询
    import {
        listApprovePrev
    } from "../../../../api/afs-case/approve/approvePre";
    //数据字典
    import {
        getDictDataByType
    } from "_p/basic/api/admin/datadic";

    import circleLoading from "_c/circle-loading/circle-loading.vue";

    export default {
        name: "approve-pre",
        components: {
            circleLoading
        },
        data() {
            return {
                loading: true,
                searchForm: {
                    customerName:"",
                    cardNo:"",
                    phone: "",
                    applyDateStart: "",
                    applyDateEnd: "",
                    dealerName: "",
                    status: "",
                    pageNumber: 1,
                    pageSize: 10

                },
                selectDate: null,
                selectList: [],
                applyStatusList: [],
                selectCount: 0,
                modalType: 0,
                errorPass: "",
                businessTypeList: [],
                secondsAgo: 0,
                formValidate: {
                    processRemark: [{required: true, message: "备注不能为空", trigger: "blur"}]
                },
                columns: [
                    {
                        title: "申请编号",
                        sortable: true,
                        align: "center",
                        key: "applyNo",
                        fixed: "left",
                        minWidth: 180,
                    },
                    {
                        title: "姓名",
                        sortable: true,
                        align: "center",
                        key: "custName",
                        fixed: "left",
                        minWidth: 180,
                        slot:"custName"
                    },
                    {
                        title: "证件号码",
                        sortable: true,
                        align: "center",
                        minWidth: 180,
                        fixed: "left",
                        key: "certNo",
                    },
                    {
                        title: "预审批结果",
                        key: "applyStatus",
                        type: 'singleSelect',
                        sortable: true,
                        align: "center",
                        minWidth: 180,
                        slot: "applyStatus"
                    },

                    {
                        title: "手机号码",
                        sortable: true,
                        align: "center",
                        minWidth: 180,
                        key: "telPhone",
                    },
                    {
                        title: "申请时间",
                        sortable: true,
                        align: "center",
                        key: "applyDate",
                        minWidth: 180
                    },
                    {
                        title: "通过时间",
                        sortable: true,
                        align: "center",
                        key: "approveDate",
                        minWidth: 180

                    },
                    {
                        title: "销售人员",
                        align: "center",
                        minWidth: 180,
                        sortable: true,
                        key: "sellerRealName",
                    }
                    ,
                    {
                        title: "经销商名称",
                        sortable: true,
                        minWidth: 180,
                        align: "center",
                        key: "channelName",
                    },
                    {
                        title: "业务类型",
                        key: "businessType",
                        type: 'singleSelect',
                        align: "center",
                        sortable: true,
                        minWidth: 180,
                        slot: "businessType"
                    }
                ],
                data: [],
                total: 0,
                totalTag: 0
            };
        },
        methods: {
            init() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getTaskList();

            },
            selectDateRange(v) {
                if (v) {
                    this.searchForm.applyDateStart = v[0];
                    this.searchForm.applyDateEnd = v[1];
                }
            },
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getTaskList();
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.selectDate = null;

                // 重新加载数据
                this.searchForm.applyDateStart="";
                this.searchForm.applyDateEnd="";
                this.getTaskList();
            },
            hasSelected() {
                if (this.selectCount == 0) {
                    this.$Message.warning("需先勾选数据行!");
                    return false;
                } else {
                    return true;
                }
            },
            existsCurrentStatus(type, status) {
                let currentStatusNum = 0;
                this.selectList.forEach(record => {
                    if (type == "1") {
                        if (record.isLock == status) {
                            currentStatusNum++;
                        }
                    }
                });
                return currentStatusNum > 0;
            },
            changeSort(e) {
                this.searchForm.sort = e.key;
                this.searchForm.order = e.order;
                if (e.order === "normal") {
                    this.searchForm.order = "";
                }
                this.getTaskList();
            },
            changePage(v) {
                this.searchForm.pageNumber = v;
                this.getTaskList();
            },
            changePageSize(v) {
                this.searchForm.pageSize = v;
                this.getTaskList();
            },
            seizeTask(){
                alert("抢单待开发")
            },
            initBusinessType(){
                let params = {
                    type: "confBusinessType"
                }
                getDictDataByType(params.type).then(res =>{
                    if (res.code === "0000"){
                        this.businessTypeList = res.data;
                    }
                });
            },
            setBusinessTypeTitle(val){
                let dic = {}
                this.businessTypeList.forEach(column => {
                    if(column.value === val){
                        dic = column;
                    }
                });
                return dic.title;
            },
            initApplyStatus(){
                let params = {
                    type: "prevResult"
                }
                getDictDataByType(params.type).then(res =>{
                    if (res.code === "0000"){
                        this.applyStatusList = res.data;
                    }
                });
            },
            setApplyStatusTitle(val){
                let dic = {}
                this.applyStatusList.forEach(column => {
                    if(column.value === val){
                        dic = column;
                    }
                });
                return dic.title;
            },
            getTaskList() {
                // 多条件搜索任务列表
                this.loading = true;
                listApprovePrev(this.searchForm).then(res => {
                    this.loading = false;
                    if (res.code === "0000") {
                        this.data = res.data.records;
                        this.total = res.data.total;
                    }
                });
            },
        },
        created(){
            this.afs.afsOn(this,"flushData",()=>{
                this.getTaskList();
            })
        },
        beforeDestroy(){
            if (this.interval) {
                clearInterval(this.interval);
            }
            this.afs.afsOff(this,"flushData");
        },
        watch: {
            secondsAgo(newVal, oldVal) {
                this.data.forEach(data => {
                    if (!data.originalSeconds) {
                        data.originalSeconds = 0;
                    }
                    data.timming = this.formatTimeUnit(data.originalSeconds + newVal);
                });
            }
        },
        mounted() {
            this.init();
            this.initBusinessType();
            this.initApplyStatus();
        }
    };
</script>
